<template>
  <div class='container'>
    <div class='app-row m-20-t'>
      <span class="title bold width-120">商圈名称:</span>
      <el-input class='flex-1' v-model="name_value"></el-input>
    </div>
    <div class='app-row m-20-t'>
      <span class="title bold width-120">商圈地址:</span>
      <el-input class='flex-1' v-model="address_value"></el-input>
    </div>
    <div class='app-row m-20-t'>
      <span class="title bold width-120">联系人:</span>
      <el-input class='flex-1' v-model="contact_people_value"></el-input>
    </div>
    <div class='app-row m-20-t'>
      <span class="title bold width-120">联系电话:</span>
      <el-input class='flex-1' v-model="phone_value"></el-input>
    </div>
    <div class='app-row m-30-t'>
      <span class="title bold width-100">区域经销商:</span>
      <el-select class='flex-1' v-model="recommend_value" placeholder="请选择" @change="choose_expert">
        <el-option
          v-for="item in experts_list"
          :key="item.id"
          :value="item.id"
          :label="item.name">
        </el-option>
      </el-select>
    </div>
    <!-- <div class='app-row m-30-t'>
      <span class="title bold width-100">商圈封面:</span>
      <el-upload
        class="upload-demo"
        :action="save_file_url"
        :on-preview="open_preview"
        :file-list="file_list"
        :on-success="get_img_id"
        list-type="picture-card"
        name="imgFile"
        multiple
        :limit='1'>
        <i class="el-icon-plus"></i>
      </el-upload>
    </div> -->
    <div class="app-row j-c-c m-100-t">
      <el-button type="success" @click="edit_button">确认修改</el-button>
    </div>

  </div>

</template>

<script>
  import host_one from "@/api/host/host"
  import experts_request from "@/api/experts_request"
  import biz_base_request from "@/api/biz_base_request"
  export default {
    name: 'biz_base_edit',
    data() {
      return {
        name_value: "",
        save_file_url: '',
        target_img_url: '',
        target_image_preview_url: [],
        file_list: [],
        listLoading: false,
        address_value: '',
        contact_people_value: '',
        phone_value: '',
        recommend_value: '',
        experts_list:[],
        expert_id: 0,
      }
    },
    created() {
      this.save_file_url = host_one + '/uploadfile'
      this.get_experts_list()
      this.get_detail(this.$route.query.id)
  
    },
    mounted() {
  
    },
    methods: {
      choose_expert(e) {
        this.expert_id = e
      },
      check_necessary_value() {
        if (this.name_value == '') {
          this.$message.error("请输入商圈名称")
          return
        }
        if (this.address_value == '') {
          this.$message.error("请输入商圈地址")
          return
        }
        return true
      },
      get_detail(id) {
        biz_base_request.detail_biz_base({id}, res=> {
          let result = res.data
          this.name_value = result.title
          this.address_value = result.address
          this.contact_people_value = result.ext_content.contact_people
          this.phone_value = result.ext_content.phone
          if (result.eid) {
            let params = {
              id: result.eid
            }
            experts_request.detail_experts(params, res=>{
              let result = res.data
              this.recommend_value = result.name
            })
          }
        })
      },
      get_experts_list() {
        this.listLoading = true
        let params ={
          pageSize: 10, 
          page: 1, 
          // name: this.keyword
        }
        experts_request.experts_list(params, res=> {
          this.listLoading = false,
          this.experts_list = res.data
        })
      },
      edit_button() {
        let if_necessary_value = this.check_necessary_value()
        if (!if_necessary_value) {
          return
        }
        let params = {
          id: this.$route.query.id,
          title: this.name_value,
          eid: this.expert_id,
          address: this.address_value,
        }
        biz_base_request.edit_biz_base(params, res=> {

          this.$router.push('/biz_base/biz_base')

        })
      },
      get_img_id(res,file,file_list) {
        console.log(file_list);
        // this.img_id_list = file_list
        this.target_img_url = file_list[0].response.data.url
        
      },
      open_preview(file) {
        console.log(file);
        this.target_image_preview_url=file.url
      },
    }
  }
</script>

<style scoped>
@import "~@/styles/layout.scss";
</style>